<template>
  <div class="invoiceCenter">
    <van-sticky>
      <c-title :hide="false" text="发票中心"></c-title>
      <van-tabs v-model="active" :ellipsis="false" @change="activeType">
        <van-tab :name="1" title="已开票"></van-tab>
        <van-tab :name="2" title="申请中发票"></van-tab>
        <van-tab :name="3" title="申请开票"></van-tab>
        <van-tab :name="4" title="发票抬头"></van-tab>
        <van-tab :name="5" title="余额发票" v-if="balance_invoice == 1"> </van-tab>
      </van-tabs>
    </van-sticky>
    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height: 50vh;"> -->
    <component v-if="active != 5" :is="'invoice' + active" :toast="Toast" :status="active" :list="list" :total="total" @getlist="getList(true)" :sinvoice="sinvoice"></component>
    <balance_invoice_List v-if="active == 5" :list="list" @update="updateData"></balance_invoice_List>
    <div v-show="list && list.length <= 0 && !loading && !isLoading">
      <yz-blank text="暂无数据" :isBtn="false"></yz-blank>
    </div>
    <div class="list-loading" v-show="loading">
      <van-loading size="1.5rem">加载中...</van-loading>
    </div>
    <van-divider dashed v-show="noMore && !loading && list.length > 0">没有更多的数据了~~~</van-divider>
    <!-- </van-pull-refresh> -->
  </div>
</template>
<script>
import Invoiced from "./component/Invoiced.vue";
import { Toast } from "vant";
import { scrollMixin } from "utils/mixin";
import yzBlank from "components/ui_components/yz_blank";
import balance_invoice_List from "./component/balance_invoice.vue";
export default {
  mixins: [scrollMixin],
  activated() {
    this.getList(true);
  },
  data() {
    return {
      active: 0,
      Toast,
      httpUrl: "plugin.invoice.frontend.index.index",
      page: 1,
      last_page: null,
      loading: false,
      isLoading: false,
      list: [],
      total: 0,
      noMore: false,
      isLoadMore: true,
      sinvoice: [],
      balance_invoice: 0
    };
  },
  methods: {
    updateData() {
      this.initPage();
      this.active = 5;
      this.httpUrl = "plugin.balance-invoice.frontend.balance-invoice.list";
      this.getList(true);
    },
    initPage() {
      this.list = [];
      this.page = 1;
      this.last_page = null;
      this.total = 0;
    },
    activeType(type) {
      if (type == 1 || type == 2) {
        this.httpUrl = "plugin.invoice.frontend.index.index";
      } else if (type == 3) {
        this.httpUrl = "plugin.invoice.frontend.index.not-invoice";
      } else if (type == 5) {
        this.httpUrl = "plugin.balance-invoice.frontend.balance-invoice.list";
      } else {
        this.httpUrl = "plugin.invoice.frontend.rise.get-list";
      }
      this.getList(true);
    },
    getList(loading = true) {
      this.loading = loading;
      this.initPage();
      let json = { page: 1 };
      if (this.active != 5) {
        json.status = this.active;
      }
      $http.get(this.httpUrl, json).then(({ result, msg, data }) => {
        this.loading = false;
        this.isLoading = false;
        if (result == 1 && data) {
          data.data = data.data || [];
          if (this.active == 3) {
            this.sinvoice = data.sinvoice;
            data.data.forEach(item => {
              item.button_models = [{ name: "申请开票", value: "apply_invoice", api: "test", type: "" }];
            });
          } else if (this.active == 4) {
            data.data.forEach(item => {
              item.change = false;
            });
          }
          this.list = data.data;
          this.total = data.total;
          this.last_page = data.last_page;
          this.balance_invoice = JSON.parse(localStorage.getItem("yz_basic_info"))?.plugin_setting?.balance_invoice.is_open;
        } else {
          this.last_page = 1;
          Toast(msg);
        }
      });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page == this.last_page) {
        Toast("没有更多的数据了");
        this.noMore = true;
        return false;
      } else {
        this.loading = true;
        this.page = this.page + 1;
        let json = { page: this.page };
        if (this.active != 5) {
          json.status = this.active;
        }
        $http.get(this.httpUrl, json).then(({ result, msg, data }) => {
          this.loading = false;
          this.isLoadMore = true;
          if (result == 1) {
            data.data = data.data || [];
            if (this.active == 3) {
              // this.sinvoice = data.sinvoice;
              data.data.forEach(item => {
                item.button_models = [{ name: "申请开票", value: "apply_invoice", api: "test", type: "" }];
              });
            } else if (this.active == 4) {
              data.data.forEach(item => {
                item.change = false;
              });
            }
            this.list = this.list.concat(data.data);
          } else {
            this.page = this.page - 1;
            Toast(msg);
          }
        });
      }
    },
    onRefresh() {
      //下拉刷新
      this.getList(false);
    }
  },
  components: {
    invoice1: Invoiced,
    invoice2: Invoiced,
    invoice3: () => import("./component/apply.vue"),
    invoice4: () => import("./component/Invoice-header.vue"),
    yzBlank,
    balance_invoice_List
  }
};
</script>
<style lang="scss" scoped>
.invoiceCenter {
  text-align: left;
}

.list-loading {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
</style>
